<template>
  <div style="margin-bottom: 10px;display: flex">
    <span style="display: block;text-align: center;">Index Report</span>
    <div style="flex: 1"></div>
    <el-date-picker
      v-model="value2"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      :shortcuts="shortcuts"
      :size="size"
    />
    <el-button @click="getSumary" style="margin-left: 10px" type="primary">{{ t('action.search') }}</el-button>
  </div>
  <el-row :class="prefixCls" :gutter="20" justify="space-between">
    <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
                >
                  <Icon :size="40" icon="fa:dollar" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-24px text-gray-500 text-right`"
                  >Total Sale
                </div>
<!--                <CountTo-->
<!--                  :duration="2600"-->
<!--                  :end-val="81212"-->
<!--                  :start-val="0"-->
<!--                  class="text-right text-20px font-700"-->
<!--                />-->
                <span class="text-right text-40px font-700">{{ sumaryData.sumary.totalSale }}</span>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
                >
                  <Icon :size="40" icon="fa:dollar" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-24px text-gray-500 text-right`"
                  >Total Cost
                </div>
<!--                <CountTo-->
<!--                  :duration="2600"-->
<!--                  :end-val="9280"-->
<!--                  :start-val="0"-->
<!--                  class="text-right text-20px font-700"-->
<!--                />-->
                <span class="text-right text-40px font-700">{{ sumaryData.sumary.totalPurhase }}</span>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
                >
                  <Icon :size="40" icon="fa:dollar" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-24px text-gray-500 text-right`"
                  >Total Profit
                </div>
<!--                <CountTo-->
<!--                  :duration="2600"-->
<!--                  :end-val="13600"-->
<!--                  :start-val="0"-->
<!--                  class="text-right text-20px font-700"-->
<!--                />-->
                <span class="text-right text-40px font-700">{{ sumaryData.sumary.totalProfit }}</span>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" justify="space-between">
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="4" animated>
          <Echart :height="500" :options="lineOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'

import { useDesign } from '@/hooks/web/useDesign'
import type { AnalysisTotalTypes } from './types'
// import { barOptions, lineOptions, pieOptions } from './echarts-data'
import {CommonApi} from "@/api/su/common";

defineOptions({ name: 'Home2' })

const { t } = useI18n()
const loading = ref(true)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('panel')

const lineOptionsData = ref('')

const size = ref<'default' | 'large' | 'small'>('default')
const value2 = ref('')
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

let totalState = reactive<AnalysisTotalTypes>({
  users: 0,
  messages: 0,
  moneys: 0,
  shoppings: 0
})

const queryParams = reactive({
  startDate: undefined,
  endDate: undefined
})

const sumaryData = ref('')
const getSumary = async () => {
  queryParams.startDate = value2.value == null ? null : value2.value[0]
  queryParams.endDate = value2.value == null ? null : value2.value[1]
  sumaryData.value = await CommonApi.indexSummary(queryParams);

  let xData = []
  let yData1 = []
  let yData2 = []

  sumaryData.value.saleByMonth.forEach((element) => {
    xData.push(element.year + '-' + element.month)
    yData1.push(element.totalSale)
    yData2.push(element.totalProfit)
  })

  lineOptionsData.value = {
    title: {
      text: 'CI Sale Summary',
      left: 'left'
    },
    xAxis: {
      data: xData,
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 20,
      top: 80,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: ['Total Sale', 'Total Profit'],
      top: 5
    },
    series: [
      {
        name: 'Total Sale',
        smooth: true,
        type: 'line',
        data: yData1,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      },
      {
        name: 'Total Profit',
        smooth: true,
        type: 'line',
        itemStyle: {},
        data: yData2,
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      }
    ]
  }
}

const getAllApi = async () => {
  await Promise.all([getSumary()])
  loading.value = false
}

getAllApi()
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;

.#{$prefix-cls} {
  &__item {
    &--peoples {
      color: #40c9c6;
    }

    &--message {
      color: #36a3f7;
    }

    &--money {
      color: #f4516c;
    }

    &--shopping {
      color: #34bfa3;
    }

    &:hover {
      :deep(.#{$namespace}-icon) {
        color: #fff !important;
      }

      .#{$prefix-cls}__item--icon {
        transition: all 0.38s ease-out;
      }

      .#{$prefix-cls}__item--peoples {
        background: #40c9c6;
      }

      .#{$prefix-cls}__item--message {
        background: #36a3f7;
      }

      .#{$prefix-cls}__item--money {
        background: #f4516c;
      }

      .#{$prefix-cls}__item--shopping {
        background: #34bfa3;
      }
    }
  }
}
</style>
